❓질문

웹 애플리케이션의 성능을 최적화할 수 있는 방법들에 대해서 아는대로 설명해주세요.

💡 조사하기전 내가 알고 있던 내용

코드 스플리팅 : 자바스크립트의 파일을 필요한 부분만 로드 시킬수있습니다 이를 이용하면 모든 자바스크립트 코드를 바로 불러오지않고 필요한 부분만 먼저가져와 사용할수있으니 로딩 속도을 개선 시킬수있습니다.

lazy.loading : 페이지에 있는 이미지나 동영상 같은 큰 파일들을 실제로 볼때만 로드하는 기법입니다

파일 포맷 변경 : jpg나 png 같은 큰 용량의 이미지 포맷을 사용하지않고 webp 같은 용량이 낮은 포맷을 사용하면 다운로드할 파일의 용량이 줄어들어 빠르게 렌더 시킬수있습니다( discord도 webp 사용 )

🏫 정리한 내용

위 내용과 동일

추가로 캐시를 활용하여 브라우저에 저장 되어있는 캐시된 데이터를 재사용하여 성능을 크게 상향 시킬수있고

자바스크립트 로드시 비동기 로딩 (async) 이나 지연 로딩(defer)을 이용하여 자바스크립트가 DOM을 차단하지않게 할수있습니다 이를 통해 페이지가 로드되는동안 병렬로 처리하거나 적절한 타이밍에 로드하게하여 사용자 경험이 더 쾌적해질수 있습니다.